import React from 'react';
import { Form, Row, Col, Select } from 'antd';
import Difference from '@/pages/WorkFlow/components/FormControls/components/Difference';

const selectKeyOptions = { value: 'positionTypeCode', name: 'positionTypeName', remark: 'positionTypeCode' };
const PostFormItem = props => {
    const {
        label = '',
        prop: receivedProp = [], // prop可以传一个值也可以是一个数组
        initialFormInfo = {}, // 可以把所有初始值放在initialFormInfo
        required = false,
        disabled = false,
        positionTypeList = [],
        rules,
        form,
        tips = {},
        ...otherProps
    } = props;

    const prop = Array.isArray(receivedProp) ? receivedProp : new Array(receivedProp);
    const { getFieldDecorator } = form;
    const [firstPositionTip, setFirstPositionTip] = React.useState();
    const [secondPositionTip, setSecondPositionTip] = React.useState();
    const [secondPositionTypeOptions, setSecondPositionTypeOptions] = React.useState([]);

    React.useEffect(() => {
        const { firstPositionCode } = initialFormInfo;
        if (positionTypeList.length > 0 && firstPositionCode) {
            const found = positionTypeList.find(item => item.positionTypeCode === firstPositionCode);
            setSecondPositionTypeOptions(found?.children || []);
        }
    }, [positionTypeList, initialFormInfo]);

    React.useEffect(() => {
        const getPrimitiveValue = (code, primitiveData = []) => {
            if (!code) {
                return undefined;
            }
            const found = primitiveData.find(item => item.positionTypeCode === code);
            return found?.positionTypeName || undefined;
        };

        if (tips && positionTypeList.length > 0) {
            const { firstPositionCode, secondPositionCode } = tips;
            const found = positionTypeList.find(item => {
                if (firstPositionCode) {
                    return item.positionTypeCode === firstPositionCode;
                }
                // 如果只有 secondPositionCode 发生变化则 firstPositionCode 的值取当前值
                return item.positionTypeCode === initialFormInfo?.firstPositionCode;
            });
            const firstPositionPrimitiveValue = getPrimitiveValue(firstPositionCode, positionTypeList);
            const secondPositionPrimitiveValue = getPrimitiveValue(secondPositionCode, found?.children || []);
            setFirstPositionTip(firstPositionPrimitiveValue);
            setSecondPositionTip(secondPositionPrimitiveValue);
        }
    }, [tips, positionTypeList]);

    return (
        <Form.Item label={label} {...otherProps} style={{ marginBottom: 0 }} required={required}>
            <Row gutter={15}>
                <Col md={12} xs={24} sm={24}>
                    <Form.Item>
                        <Difference tip={firstPositionTip}>
                            {getFieldDecorator('firstPositionCode', {
                                initialValue: initialFormInfo[prop[0]] || undefined,
                                rules: [
                                    {
                                        required,
                                        message: '请选择职位类别'
                                    }
                                ]
                            })(
                                <Select allowClear placeholder="请选择职位类别" disabled={disabled}>
                                    {positionTypeList.map(item => (
                                        <Select.Option
                                            value={item[selectKeyOptions.value]}
                                            key={item[selectKeyOptions.value]}
                                            remark={item[selectKeyOptions.remark]}
                                        >
                                            {item[selectKeyOptions.name]}
                                        </Select.Option>
                                    ))}
                                </Select>
                            )}
                        </Difference>
                    </Form.Item>
                </Col>
                <Col md={12} xs={24} sm={24}>
                    <Form.Item>
                        <Difference tip={secondPositionTip}>
                            {getFieldDecorator('secondPositionCode', {
                                initialValue: initialFormInfo[prop[1]] || undefined,
                                rules: [
                                    {
                                        required,
                                        message: '请选择'
                                    }
                                ]
                            })(
                                <Select allowClear placeholder="请选择" disabled={disabled}>
                                    {secondPositionTypeOptions.map(item => (
                                        <Select.Option
                                            value={item[selectKeyOptions.value]}
                                            key={item[selectKeyOptions.value]}
                                            remark={item[selectKeyOptions.remark]}
                                        >
                                            {item[selectKeyOptions.name]}
                                        </Select.Option>
                                    ))}
                                </Select>
                            )}
                        </Difference>
                    </Form.Item>
                </Col>
            </Row>
        </Form.Item>
    );
};

export default PostFormItem;
